<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input
        v-model="listQuery.provinceName"
        placeholder="输入省份名称"
        style="width: 150px;"
        class="filter-item"
        @keyup.enter.native="handleFilter"
      />
      <el-input
        v-model="listQuery.cityName"
        placeholder="输入城市名称"
        style="width: 150px;"
        class="filter-item"
        @keyup.enter.native="handleFilter"
      />
      <el-date-picker
        v-model="listQuery.startDate"
        class="filter-item"
        style="width: 150px;"
        type="date"
        placeholder="选择日期"
        value-format="yyyy-MM-dd"
        :clearable="false"
        :editable="false"
      >
      </el-date-picker>
      <el-button
        v-waves
        class="filter-item"
        type="primary"
        icon="el-icon-search"
        @click="handleFilter"
      >
        搜索
      </el-button>
    </div>
    <el-table
      v-loading="listLoading"
      :data="tableData1"
      border
      fit
      highlight-current-row
      style="width: 100%;"
    >
      <!-- <el-table-column label='日期' align='center'>
        <template slot-scope='{ row }'>
          <span>{{ row.creatTime }}</span>
        </template>
      </el-table-column>
      <el-table-column label='省份' class-name='status-col'>
        <template slot-scope='{ row }'>
          {{ row.province }}
        </template>
      </el-table-column>
      <el-table-column label='城市' align='center'>
        <template slot-scope='{ row }'>
          <span>{{ row.city }}</span>
        </template>
      </el-table-column> -->
      <el-table-column width="400px" label="地区" align="center">
        <template>
          <span>汇总</span>
        </template>
      </el-table-column>
      <el-table-column label="表单总量" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.total }}</span>
        </template>
      </el-table-column>
      <el-table-column label="进件成功数" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.incomingSuccessNumber }}</span>
        </template>
      </el-table-column>
      <el-table-column label="表单成功率" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.formSuccessRate }}</span>
        </template>
      </el-table-column>
      <el-table-column label="进件成功率" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.incomingSuccessRate }}</span>
        </template>
      </el-table-column>
      <el-table-column label="额度5万以上" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.quota }}</span>
        </template>
      </el-table-column>
      <el-table-column label="芝麻分650以上" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.score }}</span>
        </template>
      </el-table-column>
      <el-table-column label="有公积金" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.accumulation }}</span>
        </template>
      </el-table-column>
      <el-table-column label="有房" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.house }}</span>
        </template>
      </el-table-column>
      <el-table-column label="有车" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.car }}</span>
        </template>
      </el-table-column>
      <el-table-column label="个体户/企业主" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.isBusiness }}</span>
        </template>
      </el-table-column>
    </el-table>
    <el-table
      v-loading="listLoading"
      :data="tableData"
      border
      fit
      highlight-current-row
      style="width: 100%;margin-top:30px"
    >
      <el-table-column label="日期" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.creatTime }}</span>
        </template>
      </el-table-column>
      <el-table-column label="省份" class-name="status-col">
        <template slot-scope="{ row }">
          {{ row.province }}
        </template>
      </el-table-column>
      <el-table-column label="城市" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.city }}</span>
        </template>
      </el-table-column>
      <el-table-column label="表单总量" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.total }}</span>
        </template>
      </el-table-column>
      <el-table-column label="进件成功数" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.incomingSuccessNumber }}</span>
        </template>
      </el-table-column>
      <el-table-column label="表单成功率" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.formSuccessRate }}</span>
        </template>
      </el-table-column>
      <el-table-column label="进件成功率" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.incomingSuccessRate }}</span>
        </template>
      </el-table-column>
      <el-table-column label="额度5万以上" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.quota }}</span>
        </template>
      </el-table-column>
      <el-table-column label="芝麻分650以上" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.score }}</span>
        </template>
      </el-table-column>
      <el-table-column label="芝麻分700以上" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.sevenMore }}</span>
        </template>
      </el-table-column>
      <el-table-column label="有公积金" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.accumulation }}</span>
        </template>
      </el-table-column>
      <el-table-column label="有房" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.house }}</span>
        </template>
      </el-table-column>
      <el-table-column label="有车" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.car }}</span>
        </template>
      </el-table-column>
      <el-table-column label="个体户/企业" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.isBusiness }}</span>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="listQuery.current"
      :limit.sync="listQuery.size"
      @pagination="getCityCount"
    />
    <el-dialog fullscreen="true" :visible.sync="dialogVisible" @open="open()">
      <div class="echarsMap">
        <div id="china_map" style="width: 100%; height: 100%;"></div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getCityCount,
  selectCityCountSummary,
  getCityMap
} from '@/api/advertising';
import Pagination from '@/components/Pagination';
export default {
  components: { Pagination },
  data() {
    return {
      listQuery: {
        cityName: '',
        current: 1,
        endDate: '',
        provinceName: '',
        size: 10,
        startDate: ''
      },
      tableData: [],
      tableData1: [],
      times: [],
      dialogVisible: false,
      cityList: [],
      chartOption: {}
    };
  },
  created() {
    this.getCityCount(this.listQuery);
    this.getSumList(this.listQuery);
    this.defaultDate();
  },
  methods: {
    defaultDate() {
      let date = new Date();
      // 获取当前时间的年份转为字符串
      let year = date.getFullYear().toString();
      // 获取月份，由于月份从0开始，此处要加1，判断是否小于10，如果是在字符串前面拼接'0'
      let month =
        date.getMonth() + 1 < 10
          ? '0' + (date.getMonth() + 1).toString()
          : (date.getMonth() + 1).toString();
      // 获取天，判断是否小于10，如果是在字符串前面拼接'0'
      let da =
        date.getDate() < 10
          ? '0' + date.getDate().toString()
          : date.getDate().toString();
      // 字符串拼接，开始时间，结束时间
      let end = year + '-' + month + '-' + da; //当天
      let beg = year + '-' + month + '-' + da;
      // this.times = [beg, end]; //将值设置给插件绑定的数据
      this.listQuery.startDate = end;
      // this.listQuery.endTime=beg
    },
    async getCityCount(listQuery) {
      const res = await getCityCount(this.listQuery);
      this.tableData = res.data.data.records;
      this.total = res.data.data.total;
    },
    async getSumList() {
      const res1 = await selectCityCountSummary(this.listQuery);
      this.tableData1 = res1.data.data;
    },
    handleFilter() {
      this.listQuery.current = 1;
      // if (this.times == null) {
      //   this.listQuery.endDate = '';
      //   this.listQuery.startDate = '';
      // } else if (this.times.length === 0) {
      //   this.listQuery.endDate = '';
      //   this.listQuery.startDate = '';
      // } else {
      //   this.listQuery.endDate = this.times[1];
      //   this.listQuery.startDate = this.times[0];
      // }
      this.getCityCount(this.listQuery);
      this.getSumList(this.listQuery);
    }
  }
};
</script>

<style lang="scss" scoped>
.echarsMap {
  height: 788px;
  width: 100%;
  margin-top: 60px;
}
</style>
